import { Component, memo, PropsWithChildren, useState } from "react";
import Taro, { useLoad } from "@tarojs/taro";
import { View } from "@tarojs/components";
import request from "@/services/index.ts";
import styles from "./index.module.scss";

interface InfoType {
  persoldate: {
    name: string;
    school: string;
    email: string;
    phone: string;
    evaluate: string;
    education: string;
    experience:any,
  };
  proskill: any;
}
const Index = memo(function () {
  const [getOppoDetailInfo, setgetOppoDetailInfo] = useState<InfoType>({
    persoldate: {
      name: "",
      school: "",
      email: "",
      phone: "",
      evaluate: "",
      education: "",
      experience:[],
    },
    proskill: [],
  });
  useLoad(() => {
    let obj={
      link:Taro.getStorageSync('link'),
      eid:Taro.getStorageSync('eid')
   }
    request.get("/promotion/baseDate",obj).then((res) => {
      res.data.persoldate.experience=JSON.parse(res.data.persoldate.experience)
      setgetOppoDetailInfo(res.data);
    });
  });
  return (
    <View>
      <View className={`${styles.box} flex wrap backgroundImg`}>
        <View className={`${styles.meBox}`}>
          <View className={`${styles.headPhoto}`}></View>
          <View className={`${styles.meBox_title} ${styles.column}`}>
            <View className={`${styles.nameTitle}`}> {`I'm${getOppoDetailInfo?.persoldate?.name}`}</View>
            <View className={`${styles.fg}`}></View>
          </View>
          <View className={`${styles.meBox_text}`}>
            <View>学历:{getOppoDetailInfo?.persoldate?.education}</View>
            <View>学校:{getOppoDetailInfo?.persoldate?.school}</View>
            <View>手机:{getOppoDetailInfo?.persoldate?.phone}</View>
            <View>邮箱:{getOppoDetailInfo?.persoldate?.email}</View>
            <View style="margin-top: 20px">
              {getOppoDetailInfo?.persoldate?.evaluate}
            </View>
          </View>
        </View>
        <View className={`${styles.cmdBox}`}>
          <View className={`${styles.cmd} ${styles.cmd1}`}>
            <View className={`${styles.title} flex`}>
              <View className={`${styles.click} ac`}>
                <View className={`${styles.red} ${styles.rred}`}></View>
                <View className={`${styles.yellow} ${styles.rred}`}></View>
                <View className={`${styles.green} ${styles.rred}`}></View>
              </View>
              <span>工作经历</span>
            </View>
            <View style={{width:"100%",display:'inline-block'}} className={`${styles.cmdText} flex`}>
              <View >
                {getOppoDetailInfo.persoldate.experience.map(
                  (item: { company: string; time: string,id:number }) => {
                    return (
                      <View key={item.company}>
                          <View className={`${styles.content}`} >{item.time}</View>
                          <View style={{display:'inline-block'}}>{item.company}</View>
                      </View>
                    );
                  }
                )}
              </View>
            </View>
            </View>
            <View>
            <View className={`${styles.cmd} ${styles.cmd2}`}>
              <View className={`${styles.title} flex`}>
                <View className={`${styles.click} ac`}>
                  <View className={`${styles.red} ${styles.rred}`}></View>
                  <View className={`${styles.yellow} ${styles.rred}`}></View>
                  <View className={`${styles.green} ${styles.rred}`}></View>
                </View>
                <span>专业技能</span>
              </View>
            <View className={`${styles.cmdText}`}>
              {getOppoDetailInfo?.proskill.map(item=>{
                  return(
              <View   key={item.id} >
                {item.professionalSkills }
                    </View>
                  )
              })}
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
});

export default Index;
